<template>
  <a-spin tip="Loading..." :spinning="spinning" >
    <a-layout v-if="!spinning" id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible
                      width="230px">
        <div class="logo" />
        <main-sidebar />
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <main-navbar />
        </a-layout-header>
        <a-layout-content
          :style="{background: '#fff'}"
        >
          <main-content />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-spin>
</template>

<script>
  import MainNavbar from './layout/main-navbar'
  import MainSidebar from './layout/main-sidebar'
  import MainContent from './layout/main-content'
  export default {
    data () {
        return {
            collapsed: false,
            spinning:true,
            documentClientHeight:0,
        }
    },
    components: {
        MainNavbar,
        MainSidebar,
        MainContent
    },
    computed: {

    },
    created () {

    },
    mounted () {
        this.spinning=false;
    },

  }
</script>
<style>
  .table-page-search-wrapper .ant-form-item{
    display: flex;
  }
  .table-page-search-wrapper .ant-form-item-control-wrapper{
    flex: 1;
  }
  .table-operator {
    margin: 18px 0px;
  }

  html::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  html::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: rgba(58, 59, 62, 0.1);
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }
  html::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
</style>
